<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        请输入姓名:
        <input type="text" value="" id="user"><br>
        请输入邮箱:
        <input type="email" value="" id="email">
    </div>
    <button>添加</button>
    <table border="1">
        <thead>
            <tr>
                <th>姓名:</th>
                <th>邮箱:</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>小黑</td>
                <td>xiaohei@qq.com</td>
            </tr>
        </tbody>
    </table>

    <script>
        // var but = document.querySelector('button');
        // var user = document.querySelector('#user');
        // var email = document.querySelector('#email');
        // var tbo = document.querySelector('table tbody');
        // console.log(tbo);



        // but.onclick = function () {
        //     if (user.value =='' || email.value =='') {
        //         alert('请输入正确的内容')
        //         return;
        //     }
        //     // 创建一行
        // var tab = document.createElement('tr')
        // console.log(tab);
        // // // 
        // tbo.appendChild(tab)
        // //创建列
        // var td1 = document.createElement('td')
        // // 输入的值给td1
        // td1.innerHTML = user.value
        // var td2 = document.createElement('td')
        // td2.innerHTML = email.value

        // // //  
        // tab.appendChild(td1)
        // tab.appendChild(td2)
        // // // console.log(tab);
        // }
        
        var button=document.querySelector('button')
        var user=document.querySelector('#user')
        var email=document.querySelector('#email')
        var tbody=document.querySelector('table tbody')

        button.onclick=function(){
            //  如果我得user或email没有就弹出警示框
            if(user.value=='' || email.value==''){
                alert('请输入内容')
            }
            // 创建行
            var tr=document.createElement('tr')
            // 把行追加到我的表格里
            tbody.appendChild(tr)

            // 创建列
            var td1=document.createElement('td')
            var td2=document.createElement('td')
            // 给列赋值
            td1.innerHTML=user.value
            td2.innerHTML=email.value
            // 把列追加到行里面
            tr.appendChild(td1)
            tr.appendChild(td2)

            // 每次添加完成后把输入框清空
            user.value=''
            email.value=''

        }



        



    </script>
</body>

</html>